import React, {Component} from 'react'
import Dimensions from 'react-dimensions'
import moment from 'moment';
import {fetchData} from '../../components/AjaxConsumer'
import Actions from '../../actions'
import store from '../../stores'

import {
    Form,
    Input,
    Tooltip,
    Icon,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    message,
    Modal,
    Radio,
    DatePicker
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const confirm = Modal.confirm;
class ListMdvalidwkposForm extends React.Component {
    state = {
        loading: false,
        edit:false,
        submitUrl:'',
        factoryList:[],
        sendSpotList:[],

        formData:{
            validWkposId:'',
            factoryCode:'',
            empCode:'',
			wkposCode:'',
        }
    };
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, fieldsValue) => {

                if (!err) {
                    this.setState({loading: true});
                    let values = {
                        ...fieldsValue,
                    };

                    console.log('表单提交数据-----------',values);
                    //发送ajax 控制请求数据规则，无值的设为空
                    for (let item in values) {
                        if (!values[item]) {
                            values[item] = ''
                        }
                    }
                    const options = {
                        url: this.state.submitUrl,
                        type: 'post',
                        condition: values
                    };

                    fetchData(this, options, (res) => {
                        //回调函数
                        this.setState({
                            loading:false
                        });

                        if (res.code == '1') {
                            message.success('操作成功');
                            
                            this.handleCancel();
                            this.props.refreshHandle();
                        }else{
                            message.error(res.msg);
                        }
                        
                    })
                }
            });
    }

    handleCancel = () => {
        this.props.onCancel();//123
        this.props.form.resetFields(); //初始化表单
        //初始化ajax加载过来的selectList
    }

    // 修改属性后刷新-n次
    componentWillReceiveProps(nextProps){
        // if(nextProps.init){
        //     if(this.state.factoryList.length==0){
        //         this.queryWarehousesUnderFactory();
        //         this.queryFactory();
        //     }
        // }

        console.log('componentWillReceiveProps------',nextProps);

        let tmpFormData = nextProps.formData;
        let url = nextProps.submitUrl;
        if(url=='/base/data/mdvalidwkpos/u'){
            
            this.setState({
                formData:tmpFormData,
                submitUrl:nextProps.submitUrl,
                edit:true
            });
        } else {
            this.setState({
                formData:tmpFormData,
                submitUrl:nextProps.submitUrl,
                edit:false
            });
        }

    }
    // 组件参数实例化-仅一次
    componentWillMount(){
        this.setState({
            submitUrl:this.props.submitUrl,
            formData:this.props.formData
        });
    }
    //初始化页面刷新-仅一次
    componentDidMount(){
        // this.queryFactory();
        // this.queryWarehousesUnderFactory();
        // this.querySendSpotUnderFactory();
    }

    // 查询工厂
    queryFactory=()=>{
        let factoryCode = 'all';
        let options= {
            url: '/base/data/mdsendspot/r/factory',
            type: 'post',
            condition:{}
        };
        fetchData(this, options, (listData)=>{
            let optionList = [];
            listData.data.map( (e,index) => {
                let tmp = {};
                tmp.selectValue = e.factoryCode;
                tmp.SelectName = e.factoryName;
                optionList.push(tmp);
            });
            if(this.props.submitUrl=='/base/data/mdvalidwkpos/u'){
                this.setState({
                    edit:true,
                    factoryList:optionList
                });
            } else {
                this.setState({
                    edit:false,
                    factoryList:optionList
                });
            }
        });
    }

    // 查询工厂下的工位
    querySendSpotUnderFactory = (factoryCode) =>{
       // if (factoryCode != '' && factoryCode != undefined){
            const options= {
                url: '/base/data/mdsendspot/r/'+1+'/sendspot',
                type: 'post',
                condition:{}
            };
            fetchData(this, options, (res) => {
                let optionList = [];
                res.data.map((e,index)=>{
                    let tmp = {};
                    tmp.selectValue = e.sendSpot;
                    tmp.SelectName = e.sendSpot;
                    optionList.push(tmp);
                });
                this.setState({ sendSpotList: optionList })



            });
        //} else {
        //    this.setState({ sendSpotList: [] })
        //}
       // this.props.form.setFieldsValue({wkposCode:''})
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6}
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 14}
            }
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {span: 24,offset: 0},
                sm: {span: 24,offset: 10}
            }
        };
        //一行几个 （总宽度24,）
        const colNumber = 12;//一行2个
        return (
            <div>
                <Form
                    onSubmit={this.handleSubmit}
                    style={{
                    backgroundColor: '#fff',
                    paddingTop: '20px',
                    paddingBottom: '20px'
                }}>
                    <Row>
                        <Col span={0}>
                                <FormItem>
                                    {getFieldDecorator('validWkposId',{
                                        initialValue: this.state.formData.validWkposId,
                                        rules: [
                                            {}
                                        ]
                                    })(<Input type="hidden"/>)}
                                </FormItem>
                        </Col>
                       <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="接收人码" hasFeedback>
                                {getFieldDecorator('empCode', {
                                    initialValue:this.state.formData.empCode,
                                    rules: [
                                        {
                                            required: true, message: '请输入接收人编码!'
                                        },
                                        {
                                            max:64,message: '输入内容应少于64个字符！'
                                        }
                                    ]
                                })(<Input disabled={this.state.edit}/>)}
                            </FormItem>
                        </Col>

                        <Col span={colNumber}>
                            <FormItem
                                {...formItemLayout}
                                label="接收工位编码"
                            >
                                <Row gutter={8}>
                                    {getFieldDecorator('wkposCode', {
                                        initialValue:this.state.formData.wkposCode,
                                        rules: [{
                                            required: true, message: '请选择接收工位编码!'
                                        }],
                                    })(<Input />)}
                                    {/* (
                                        <Select
                                            disabled={this.state.edit}
                                            placeholder="请选择"
                                            showSearch
                                            allowClear
                                        >
                                            {
                                                this.state.sendSpotList.map((es,sIndex)=>{
                                                    return (
                                                        <Option key={sIndex} value={es.selectValue}>{es.SelectName}</Option>
                                                    )
                                                })
                                            }
                                        </Select>
                                    )}*/}
                                </Row>
                            </FormItem>
                        </Col>



  


                        <Col span={24}>
                            <FormItem {...tailFormItemLayout}>
                                <Button type="primary" htmlType="submit" size="large">{this.state.loading?'提交中...':'确定'}</Button>
                                <Button
                                    type="default"
                                    style={{marginLeft: '50px'}}
                                    size="large"
                                    onClick={this.handleCancel}
                                >
                                    取消
                                </Button>
                            </FormItem>
                        </Col>

                    </Row>
                </Form>

            </div>
        );
    }
}

export default Form.create()(ListMdvalidwkposForm);
